<template>
	<view class="container">
		<view class="input-container">
			<text class="title">手机号:</text>
			<input type="number" class="input" placeholder="请输入手机号" v-model="telephone" />
			<view class="btn" @tap="goToSelect">查询</view>
		</view>
		<view class="person-container" :class="{ hidden: !hasPerson }">
			<text>{{ userName }}</text>
			<view class="input-container">
				<text class="title">姓名:</text>
				<input type="number" class="input" placeholder="请输入真实姓名" v-model="communityAdminName" />
			</view>
			<view class="confirm" @tap="confirm">添加</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			telephone: '',
			hasPerson: false,
			userName: '',
			clientUserId: '',
			communityAdminName: '',
			communityId: ''
		};
	},
	onLoad(e) {
		if (e.scene) {
			this.communityId = e.scene;
			this.$http
				.request({
					url: 'api/Community/CheckCommunityAdminIsExist',
					data: {
						Id: this.communityId
					}
				})
				.then(res => {
					// #ifdef H5
					this.$wechat.hideMenu();
					// #endif
					if (res) {
						uni.showToast({
							icon: 'none',
							title: '已有管理员',
							success() {
								setTimeout(function() {
									uni.switchTab({
										url: '../../index/index'
									});
								}, 1500);
							}
						});
					}
				});
		} else {
			this.communityId = e.communityId;
		}
	},
	methods: {
		goToSelect() {
			var that = this;
			if (!this.telephone) {
				uni.showToast({
					icon: 'none',
					title: '请输入手机号'
				});
				return false;
			}
			this.$http
				.request({
					url: 'api/Community/GetClientUserList',
					data: {
						Filter: this.telephone
					}
				})
				.then(res => {
					if (!res && res.length > 0) {
						uni.showToast({
							icon: 'none',
							title: '查无此人'
						});
						that.hasPerson = false;
					} else {
						that.userName = res[0].userName;
						that.clientUserId = res[0].id;
						that.hasPerson = true;
					}
				});
		},
		confirm() {
			var that = this;
			if (!this.communityAdminName) {
				uni.showToast({
					icon: 'none',
					title: '请输入真实姓名'
				});
				return false;
			}
			this.$http
				.request({
					url: 'api/Community/CreateCommunityAdmin',
					method: 'PUT',
					data: {
						CommunityId: that.communityId,
						CommunityAdminName: that.communityAdminName,
						ClientUserId: that.clientUserId
					}
				})
				.then(() => {
					uni.navigateBack();
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.input-container {
	display: flex;
	width: 100%;
	border-bottom: 1px solid $uni-color-divider;
	padding: 20rpx 0;
	font-size: 36rpx;
	.title,
	.input,
	.btn {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.title {
		flex-basis: 20%;
	}
	.input {
		flex-basis: 60%;
	}
	.btn {
		flex-basis: 15%;
		background: $uni-color-main-dark;
		color: #ffffff;
		border-radius: 15rpx;
		height: 70rpx;
	}
}
.person-container {
	display: flex;
	flex-direction: column;
	width: 90%;
	margin: 0 auto;
	margin-top: 30rpx;
	font-size: 40rpx;
}
.confirm {
	width: 90%;
	margin: 0 auto;
	background: $uni-color-main-dark;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #ffffff;
	font-size: 40rpx;
	margin-top: 20rpx;
	border-radius: 15rpx;
	height: 70rpx;
}
</style>
